<template>
  <div class="container">
    <div class="display">

      <div id="Catalog">

        <table>
          <tr>
            <th>Name</th>
            <th>Category</th>
            <th>Product ID</th>
            <th>Photo</th>
          </tr>

          <tr v-for="product in productList">
            <td>
              <router-link :to="{name:'productForm',params:{id:product.productId}}">
                {{ product.name }}
              </router-link>
            </td>
            <td>
              <b>
                <router-link :to="{name:'productForm',params:{id:product.productId}}">
                  {{ product.categoryId}}
                </router-link>
              </b>
            </td>
            <td>
              {{product.productId}}
            </td>
            <td>
              <img :src=this.convertToDataUrl(product.images)>
            </td>
          </tr>


        </table>

      </div>
      <div id="BackLink">
        <a @click="back">
          <button><span>返回</span></button>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "searchProduct",
  data() {
    return {
      productList: JSON.parse(this.$route.query.searchList)
    }
  },
  mounted() {
    console.log(this.productList)
  },
  methods:{
    convertToDataUrl(bytes) {
      return "data:image/png;base64," + bytes
    },
    // 返回上一页
    back(){
      this.$router.go(-1)
    },
  }
}
</script>

<style src="../../assets/css/shop.css" scoped></style>
<style scoped>
@font-face {
  font-family: 'cm';
  src: url("@/assets/font/Begilas.otf");
}

.display {
  max-height: 620px;
  top: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 600px;
  width: 600px;

}

table {
  width: 100%;
}

#catalog {
  max-height: 520px;
  overflow-y: auto;
}

#BackLink {
  position: relative;
  top: 10px;
}
</style>